<template>
    <div>
        <div class="login">
            <div class="container">
                <div class="nav">
                    <button class="comebreak" @click="$router.go(-1)">
                        <div class="left iconfont icon-arrow-left-bold"></div>
                    </button>
                </div>
                <div class="content">
                    <div class="logo"><img class="auto-img"  src="../assets/img/logo.webp" alt=""></div>
                    <h3 style="margin:10px;">欢迎登陆</h3>
                    <input type="text" placeholder="手机号" v-model="phone">
                    <input type="password" placeholder="密码" v-model="password">
                    <div class="loginbtn" @click="submit">登录</div>
                </div>
                <div class="footbox">登录代表您已阅读<span>《用户使用协议》</span></div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                phone:"",
                password:"",

            };
        },
        methods:{
            submit(){
              
                // 1.验证手机号码
                let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                // 2.验证密码
                let pass = /^[a-zA-Z0-9]\w{8,17}$/;
            
                if(!reg.test(this.phone) || !pass.test(this.password) ){//不正确处理
                    this.$toast("请输入正确手机号码与密码");
                    return;
                }
                window.localStorage.setItem("token","token值");
                window.localStorage.setItem("userId","666");
                this.$toast.success("登录成功");
                // this.$router.push("/my");
                //登录成功返回上一页
                this.$router.go(-1);
            }
        },
    

    }
</script>

<style lang="scss" scoped>
.login{
    .nav{
        .left{
            padding-left: 13px;
            margin-top: 10px;
            font-size: 30px;
        }
    }
    .content{
        font-weight: bold;
        padding: 0 13px;
        text-align: center;
        input{
            width: 80%;
            outline: none;
            border: 0;
            height: 50px;
            border-bottom: 2px solid #ccc;
            margin: 10px 0;
        }
        .loginbtn{
            
            height: 50px;
            line-height: 50px;
            background: #ee4546;
            color: #fff;
            border-radius: 25px;
            margin: 30px 30px;
        }

    }
    .footbox{
        position: fixed;
        bottom: 20px;
        left: calc(50% - 104px);
        text-align: center;
        font-size: 13px;
        font-weight: bold;
        span{
            color: #ee4546;
        }
    }
}
</style>